<template>

  <!-- 自动监测 -->

  <div class="board_page">
    <!-- 左边 -->
    <dv-border-box-13
      style="width: 23%;height: 84vh"
      class="left fade_animition_left"
      :class="isControl?'left_project':''"
      :color="['#3A506A', '#3BD5FD']"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-decoration-1 class="board_page-right-d"/>
      <h6 class="l_title-s">监测统计</h6>
      <div class="card-num-box">
        <p class="title3"> {{dataCount.name}}</p>
        <number-scroll :number="dataCount.count ? dataCount.count : 0"></number-scroll>
      </div>
      <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
        <div class='left-li common_card-bk ' v-for="item in monitor || []" :key="item.name">
          <div class='left-li-top'>
            <p class='left-li-top-title'>
              <img v-if="item.name === '工点'" src='../imgs/gongdian.png'>
              <img v-if="item.name === '监测点'" src='../imgs/jiancedian.png'>
              {{item.name}}
            </p>
            <p class='float-right left-li-title-right' style="margin-top:1rem">
              <span class='num1 color2'>
                <number-change :number="item.value" style="font-size: 1rem;"></number-change>
              </span> 个
            </p>
          </div>
        </div>
      </div>

      <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
        <div class='left-li common_card-bk ' style="width: 50%" v-for="item in monitorType || []" :key="item.name">
          <div class='left-li-top '>
            <p class='left-li-top-title'>
              <img v-if="item.name === '人工监测点'" style="width: 1.2rem;" src='../imgs/rengong.png'>
              <img v-if="item.name === '自动监测点'" style="width: 1.2rem;" src='../imgs/auto.png'>
<!--              <img v-if="item.name === '接入监测点'" style="width: 1.2rem;" src='../imgs/api.png'>-->
              <span class='num1 color2' style="margin-left: 10px">
                <number-change :number="item.value" style="font-size: 1rem"></number-change>
              </span> 个
            </p>
            <p class='float-right left-li-title-right' style="margin-top:1rem;color: #0beaeb">
              {{item.name}}
            </p>
          </div>
        </div>

      </div>
      <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
        <div class='left-li common_card-bk ' style="width: 33%" v-for="item in equipStatus || []" :key="item.name">
          <div class='left-li-top '>
            <p class='left-li-top-title'>
              <img v-if="item.name === '在线'" src='../imgs/zaixian.png'  style="width: 30%">
              <img v-if="item.name === '离线'" src='../imgs/lx.png'  style="width: 30%">
              <img v-if="item.name === '无设备'" src='../imgs/manglu.png'  style="width: 30%">
              <span class='num1 color2' style="margin-left: 10px">
                <number-change :number="item.value" style="font-size: 1rem"></number-change>
              </span> 个
            </p>
            <p class='float-right left-li-title-right' style="margin-top:1rem;color: #0beaeb">
              {{item.name}}
            </p>
          </div>
        </div>

      </div>
      <h6 class="l_title-s">监测类型占比统计</h6>
      <div ref="chart_3" class="chart_3"></div>
    </dv-border-box-13>
    <!-- 中间-->
    <dv-border-box-8
      v-if="isControl"
      style="height: 25vh"
      class="bottom_center fade_animition_center"
      :color="['#3A506A', '#3BD5FD']"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <h6 class="l_title-s">项目信息</h6>
      <div class="s-detail">
        <ul>
          <li>项目名称：<span>{{projectDetail.name}}</span></li>
        </ul>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-row>
              <el-col :span="15">
                <ul>
                  <li>所属行政区：<span>{{projectDetail.area?projectDetail.area:'---'}}</span></li>
                  <li>位置信息：<span>{{projectDetail.position?projectDetail.position:'---'}}</span></li>
                </ul>
              </el-col>
              <el-col :span="9">
                <ul>
                  <li>所属行业：<span>{{projectDetail.industryName?projectDetail.industryName:'---'}}</span></li>
                  <li>工程阶段：<span>{{projectDetail.stageName?projectDetail.stageName:'---'}}</span></li>
                </ul>
                <!-- 项目图片-->
              </el-col>
            </el-row>
            <!-- 项目概况-->
            <div v-if="projectDetail.survey" class="project_survey">{{projectDetail.survey}}</div>
            <div v-else class="project_survey">暂无项目简介</div>
          </el-col>
          <!--          <el-col :span="8" style="margin-top:10px">-->
          <!--            <el-carousel trigger="click" height="150px;">-->
          <!--              <el-carousel-item v-for="(item,index) in projectDetail.projectInfoImgList" :key="index">-->
          <!--                <el-image style="height:140px;width:100%"-->
          <!--                          @click.stop="previewImg(index,projectDetail.projectInfoImgList)"-->
          <!--                          :src="constUrl+item" fit="cover"></el-image>-->
          <!--              </el-carousel-item>-->
          <!--            </el-carousel>-->
          <!--          </el-col>-->
        </el-row>
      </div>
    </dv-border-box-8>
    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :color="['#3A506A', '#3BD5FD']"
      style="width: 23%;height: 84vh"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-decoration-12 class="board_page-right-d" style="width:350px;height:50px;"/>
      <h6 class="l_title-s">最新监测数据</h6>
      <dv-scroll-board :config="rightTableConfig" @click="click" class="dv_table_right"/>
      <h6 class="l_title-s" style="margin: 1vh;">预警等级<span
        style="font-size: 50%;margin-left: 1vw;color: rgba(255,255,255,0.5)">可点击查看</span></h6>
      <div style="width: 100%;height: 30vh">
        <el-card
          @click.native="seeMap(item.warningLevel)"
          class="grade-card card-concent"
          shadow="always"
          v-for="item in countWarn"
          :key="item.warningLevel"
          style="margin: 1vh;color: white;;cursor:pointer;"
          :style="item.warningLevel | gradeColor">
          <div style="background-color: rgb(125,125,125,0.2);;height: 48px;line-height: 48px;padding-left: 10px;width: 25%">
<!--            <i class="el-icon-s-operation"> </i>-->
            <i class="grade-word">{{ item.warningLevelName }}</i>
          </div>
          <div class="grade-box">
            <p style="padding-left: 10px">
              <span>数量：</span><span>{{ item.num }}，</span>
              <span>占比：</span><span>{{ item.percent }}%</span>
            </p>
            <el-progress
              color="#ffffff"
              :stroke-width="3"
              :show-text="false"
              class="s-progress"
              :percentage="item.percent"></el-progress>
          </div>
        </el-card>
      </div>
    </dv-border-box-13>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>

<script>
  import {
    countWarnList,
  } from '@/services/model/project-info.js'
  import {monitorTypeCount, queryRecentList} from '@/services/model/monitor-board'
  import Format from '@/utils/format'
  import NumberScroll from '../components/number-scroll'
  import NumberChange from "../components/number-change";
  import {store} from "../../../monitor/work-point.store";
  import PictureViewer from '@/components/picture-viewer'
  import constUrl from '@/services/env'

  const Echarts = require('echarts')

  export default {
    components: {NumberScroll, NumberChange, PictureViewer},
    data() {
      return {
        constUrl,
        countWarn: [],
        charts: null,
        // 右边列表
        rightTableList: [],
        equipStatus: [],
        monitorType: [],
        dataCount: {},
        monitor: {},
      }
    }, filters: {
      // 时间格式化
      formatTimer(timer) {
        return Format(new Date(timer));
      },
      // 预警等级颜色
      gradeColor(val) {
        switch (val) {
          case 1:
            return "background-color:#0DC26B !important";
          case 2:
            return "background-color:#0073b7 !important";
          case 3:
            return "background-color:#f39c12 !important";
          case 4:
            return "background-color:#ff851b !important";
          case 5:
            return "background-color:#e43321 !important";
          default:
            return "background-color:#0DC26B !important";
        }
      },
    },

    computed: {
      isControl() {
        if (this.$route.params.projectId) {
          return true
        }
        return false
      },
      projectDetail() {
        return store.projectInfo
      },
      rightTableConfig() {
        return {
          header: ['', '监测类型', '时间', '测点名称', '数据'],
          data: this.rightTableList.map(x => [
            x,
            x.monitorTypeName,
            x.createTime ? Format(new Date(x.createTime), 'yyyy-MM-dd') : '',
            `<p class="davav_p" title="${x.pointName}">${x.pointName}</p>`,
            x.recordValueName,
            '查看',
          ]),
          headerBGC: '#22314B',
          oddRowBGC: '#162036',
          evenRowBGC: '#222B40',
          rowNum: 5,
          headerHeight: 40,
          //第一个值用作跳转使用，把padding样式去掉，就不展示；最后一个作为查看按钮
          columnWidth: ['0px;padding:0', 140, 180, 200, 220, '100px;color: #1990FE;cursor: pointer;'],
        }
      }
    },
    methods: {
      // 查看大图
      previewImg(index, urls) {
        this.$refs.imageViewer.showViewer(urls.map(x => this.constUrl + x), index)
      },
      // 预警等级修改地图
      seeMap(index) {
        this.$emit('getShopCode', index)
      },
      // 预警等级占比
      async warnCountList(projectId) {
        let res = await countWarnList({projectId});
        let countWarn = res.data ? res.data : [];
        let warnAllCount = countWarn.reduce(
          (acc, current) => acc + parseInt(current.num),
          0
        );
        if (warnAllCount === 0) {
          this.countWarn = countWarn.map((item) => {
            return {
              ...item,
              percent: 0,
            }; // 占比
          });
        } else {
          this.countWarn = countWarn.map((item) => {
            return {
              ...item,
              percent: parseInt((item.num / warnAllCount) * 100),
            }; // 占比
          });
        }
      },
      click(data) {
        let row = data.row[0]
        this.$router.push({
          path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`,
        });
      },
      // 隐患排查-最近数据轮播(TOP20)
      async queryRightList(projectId) {
        const {data} = await queryRecentList({projectId})
        this.rightTableList = data || []
      },
      // 左边的echarts
      async queryLeftChart(projectId) {
        const {data} = await monitorTypeCount({projectId})
        const list = data?.typeCount.map(x => ({name: x.name, value: x.value})) || []
        this.dataCount = {
          img: require('../imgs/list_icon_0.png'),
          name: '监测数据总量',
          count: data.mainCount.find(x => x.name === '监测数据总量').value || 0,
          color: 'color3'
        }
        this.equipStatus = data.mainCount.filter(x =>
          x.name === '在线' || x.name === '离线'|| x.name === '无设备'
        )
        this.monitor = data.mainCount.filter(x =>
          x.name === "工点" || x.name === '监测点'
        )
        this.monitorType = data.mainCount.filter(x =>
          x.name === "自动监测点" || x.name === '人工监测点'
        )
        this.dispatchAction1 = ''
        this.dispatchAction2 = ''
        this.updateChart(list)
      },
      // 初始化echarts
      initChart() {
        this.charts = Echarts.init(this.$refs.chart_3, null, {
          locale: 'ZH'
        })

      },
      // 渲染数据
      updateChart(data) {
        this.charts.clear()
        const option = {
          tooltip: {
            trigger: 'item'
          },
          color: [
            '#80FABA',
            '#2BF8E3',
            '#3BD5FD',
            '#266BFF',
            '#5E52F9',
            '#80FABA',
            '#2BF8E3',
            '#2BF8E3'
          ],
          legend: {
            top: '3%',
            left: 'left',
            textStyle: {
              color: '#ffffff'
            },
            formatter: (name) => {
              let item = data.find(x => x.name === name)
              return name + ' ' + item.value
            },
          },
          series: [
            {
              name: '监测类型',
              type: 'pie',
              radius: ['40%', '65%'],
              avoidLabelOverlap: false,
              top: 60,
              label: {
                show: false,
                position: 'center'
              },
              labelLine: {
                show: false
              },
              data
            }
          ]
        }
        this.dispatchAction1 = 'highlight'
        this.dispatchAction2 = 'showTip'
        this.charts.setOption(option)
        let currentIndex = 0
        setInterval(() => {
          var dataLen = option.series[0].data.length;
          // 取消之前高亮的图形
          this.charts.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: currentIndex
          });
          currentIndex = (currentIndex + 1) % dataLen;
          // 高亮当前图形
          this.charts.dispatchAction({
            type: this.dispatchAction1,
            seriesIndex: 0,
            dataIndex: currentIndex
          });
          // 显示 tooltip
          this.charts.dispatchAction({
            type: this.dispatchAction2,
            seriesIndex: 0,
            dataIndex: currentIndex
          });
        }, 2000);
      },
      // 路线改变
      refresh(projectId) {
        this.queryLeftChart(projectId)
        this.queryRightList(projectId)
        this.warnCountList(projectId)
      },
    },
    mounted() {
      this.initChart()
      window.onresize = () => {
        this.charts.resize()
      }
    },
    activated() {

    }
  }
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>
  .left_project {
    width: 25.5rem !important; /* 392/16 */;
  }

  .dv_table_right {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 30vh;
    overflow: hidden;
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .chart_3 {
    width: 90%;
    height: 35vh;
  }

  .left-li {
    position: relative;
    margin: 0.5rem;
    width: 50%;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
  }

  .left .left-li:hover {
    cursor: pointer;
  }

  .left-li-top::after {
    display: block;
    content: " ";
    clear: both;
  }

  .left .left-li .left-li-top-title {
    float: left;
    color: #D5E3E8;
    font-size: 0.8rem;
  }

  .left .left-li .left-li-title-right {
    float: right;
    font-size: 0.55rem;
    color: #939EA3;
  }

  .left-li-bottom {
    position: relative;
    border-top: 1px solid #3A506A;
    display: flex;
    justify-content: space-around;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 0.75rem;
    color: #939EA3;
    margin-top: 2%;
    padding-top: 2%;
    line-height: 4;
  }

  .left-li-bottom::before, .left-li-bottom::after {
    content: " ";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    background: #3A506A;
    position: absolute;
    top: -0.15rem;
    z-index: 2;
  }

  .left-li-bottom::before {
    left: 0;
  }

  .left-li-bottom::after {
    right: 0;
  }

  .left .left-li .left-li-top-title img {
    width: 2.0rem;
    vertical-align: bottom;
  }

  .card-num-box {
    text-align: center;

    .title3 {
      font-size: 1.125rem;
      line-height: 1.5;
      color: #D5E3E8;
    }
  }

  .grade-card {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 13px;
    /*height: 6vh;*/

    /deep/ .el-card__body {
      padding: 0px;
      display: flex;
      align-items: center;
    }

    /deep/ .el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      display: inline-block;
      padding: 10px 0;
      width: 75%;

      p {
        margin-bottom: 1vh;

      }
    }

    /deep/ .s-progress {
      display: block;
      width: 100%;

      .el-progress-bar__outer {
        background-color: #9a9a9a;
        width: 100%;
      }
    }

    .grade-word {
      font-size: 14px !important;
      width: 65px;
    }

    i {
      padding-right: 7px;
      font-size: 26px !important;
    }
  }


  .equipmentBox {
    width: 50%;
    /*display: inline-block;*/
  }

  .s-detail ul li {
    padding: 7px;
    border-bottom: 1px solid #ebeef5;
    font-weight: bold;
    font-size: 10px;
    color: #82a8f2;
  }

  .s-detail ul li span {
    font-weight: normal;
    color: #ffffff;
  }

  .project_survey {
    overflow: auto;
    word-wrap: break-word;
    color: #ffffff;
    font-size: 13px;
    line-height: 20px;
    text-indent: 20px;
    height: 10vh;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #8c939d;
    border-radius: 10px;
  }
</style>

